import { Router, Route, Switch } from 'react-router-dom';
import React from 'react';
import './assets/styles/index.scss';
import Loading from './components/Loading';
import history from './utils/history';
import AuthRoute from './components/AuthRoute/index';

const Login = React.lazy(() => import('@/pages/Login')); //使用懒加载
const Layout = React.lazy(() => import('@/pages/Layout'));
const Search = React.lazy(() => import('@/pages/Search'));
const Result = React.lazy(() => import('@/pages/Search/Result'));
const Article = React.lazy(() => import('@/pages/Article'));
const Edit = React.lazy(() => import('@/pages/Profile/Edit'));
const Feedback = React.lazy(() => import('@/pages/Profile/Feedback'));
const Chat = React.lazy(() => import('@/pages/Profile/Chat'));

export default function App() {
  return (
    <>
      <Router history={history}>
        {/* Login/Layout是通过懒加载加载进来的，所以渲染页面的时候可能会有延迟，但使用了Suspense之后，可优化交互 */}
        <React.Suspense fallback={<Loading />}>
          <Switch>
            {/* <Redirect from="/" to="/layout" exact></Redirect> */}
            <Route path="/login" component={Login}></Route>
            <Route path="/search/result" component={Result} key={1}></Route>
            <Route path="/search" component={Search} key={2}></Route>
            <Route path="/article:id" component={Article}></Route>
            {/* <Route path="/profile/edit" component={Edit}></Route>
            <Route path="/profile/feedback" component={Feedback}></Route>
            <Route path="/profile/chat" component={Chat}></Route> */}

            {/* 鉴权 无token去login */}
            <AuthRoute path="/profile/edit" component={Edit}></AuthRoute>
            <AuthRoute
              path="/profile/feedback"
              component={Feedback}
            ></AuthRoute>
            <AuthRoute path="/profile/chat" component={Chat}></AuthRoute>
            <Route path="/" component={Layout}></Route>
          </Switch>
        </React.Suspense>
      </Router>
    </>
  );
}
